<template>
    <div class="body_box">
        <!-- app-container -->
        <div class="head">
            <el-form :model="queryParams" ref="queryParams" :inline="true">
                <el-form-item label="视频名称：" prop="videoName">
                    <el-input v-model="queryParams.videoName" placeholder="请填写"
                        clearable />
                </el-form-item>
                <el-form-item label="用户昵称：" prop="nickName">
                    <el-input v-model="queryParams.nickName" placeholder="请填写"
                        clearable />
                </el-form-item>
                <el-form-item label="用户手机号：" prop="phoneNumber">
                    <el-input v-model="queryParams.phoneNumber" placeholder="请填写"
                        clearable />
                </el-form-item>
                <el-form-item label="足迹：" prop="footprintName">
                    <el-input v-model="queryParams.footprintName" placeholder="请填写"
                        clearable />
                </el-form-item>
                <el-form-item label="发布时间：" prop="date">
                    <el-date-picker v-model="date" type="daterange" value-format="yyyy-MM-dd" range-separator="至"
                        start-placeholder="开始日期" end-placeholder="结束日期" @change="handleTime">
                    </el-date-picker>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" icon="el-icon-search" @click="handleQuery('queryParams')">搜索</el-button>
                    <el-button icon="el-icon-refresh" @click="resetQuery">重置</el-button>
                </el-form-item>
            </el-form>
        </div>
        <div class="listBox">
            <el-table ref="table" v-loading="loading" :data="tabList" stripe border>
                <el-table-column label="序号" align="center" type="index" width="64px" />
                <el-table-column label="视频名称" align="center" prop="videoName" :show-overflow-tooltip="true" width="180" />
                <el-table-column label="关联足迹" align="center" prop="footprintName" :show-overflow-tooltip="true" width="170" />
                <el-table-column label="用户昵称" align="center" prop="nickName" :show-overflow-tooltip="true" width="120" />
                <el-table-column label="用户手机号" align="center" prop="phoneNumber" :show-overflow-tooltip="true" />
                <el-table-column label="发布时间" align="center" prop="createTime" :show-overflow-tooltip="true" />
                <el-table-column label="视频播放量" align="center" prop="playNum" :show-overflow-tooltip="true" />
                <el-table-column label="视频分享量" align="center" prop="shareNum" :show-overflow-tooltip="true" width="170" />
                <el-table-column label="视频回复数" align="center" prop="replyNum" :show-overflow-tooltip="true" />
                <el-table-column label="视频点赞数" align="center" prop="likeNum" :show-overflow-tooltip="true" />
            </el-table>

            <pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNum"
                :limit.sync="queryParams.pageSize" @pagination="getList"></pagination>
        </div>
    </div>
</template>
<script>
import {
    settlementInviterList,
    videoList
} from "@/api/merchants/videoList";
import ExportExcelButton from "@/components/ExportExcelButton/index";
export default {
    name: "settlementStatistics",
    components: {
        ExportExcelButton,
    },
    data() {
        return {
            loading: false,
            total: 0,//状态字典数组
            labelList: [],
            //表格数据
            tabList: [],
            date: [],
            queryParams: {
                pageNum: 1,
                pageSize: 10,
                footprintName: "", //足迹
                nickName: '', //客户昵称
                phoneNumber: '', //手机号码
                videoName: '', //视频名称
                startTime: '', //开始时间
                endTime: '', //结束时间
            },

        }
    },
    computed: {
        ExportParams() {
            const params = {
                ...this.queryParams,
            };
            return params;
        },
    },
    created() {
        this.getDict()
        this.getList()
    },
    methods: {
        getDict() {
            var dictType = "douyin_video_talent_works_label";
            this.$getSelectList(dictType)
            .then(res => {
                this.labelList = res.result[0].dictList;
            })
            .finally(() => {
                this.loading = false;
            });
        },
        // 时间切换
        handleTime(e) {
            this.queryParams.startTime = this.date[0]
            this.queryParams.endTime = this.date[1]
        },
        /** 查询列表 */
        getList() {
            this.loading = true;
            videoList(this.queryParams).then((response) => {
                response.result.records.forEach(item => {
                    for (var key in item) {
                        if (item[key] === '') {
                            item[key] = "-";
                        }
                    }
                });
                this.tabList = response.result.records;
                this.total = response.result.total;
                this.loading = false;
            });
        },
        /** 搜索按钮操作 */
        handleQuery(formName) {
            //创建确定
            this.queryParams.pageNum = 1;
            this.getList();

        },
        /** 重置按钮操作 */
        resetQuery() {
            this.queryParams = {
                pageNum: 1,
                pageSize: 10,
                query: "", //卡查询
                referrer: '', //邀请人
                settledStatus: '', //入驻状态
                settlementAccountStatus: '', //结算账户状态
                beginDate: '', //开始时间
                endDate: '', //结束时间
            };
            // this.$refs["queryParams"].resetFields();
            this.date = []
            this.getList();
        },
    },
};

</script>
<style scoped scoped lang="scss">
::v-deep .el-table .DisableSelection .cell .el-checkbox__inner {
    display: none;
}

.body_box {
    padding: 20px;
}

.head {
    box-shadow: 0px 4px 12px 0px rgb(1 41 99 / 6%);
    background-color: #fff;
    border-radius: 8px;
    padding: 20px 20px 0;
}

.listBox {
    box-shadow: 0px 4px 12px 0px rgb(1 41 99 / 6%);
    background-color: #fff;
    border-radius: 8px;
    padding: 20px 20px;
    margin-top: 10px;
}

.listBox_head {
    padding: 0 0 5px 0;
}

.el-dropdown {
    margin-left: 10px;
}

.main_top {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    font-size: 14px;
    color: #333;
    background: #fff;
    border-radius: 6px;
    margin-bottom: 10px;

    .lef {}
}
</style>
  